<template>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/inside/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-row :gutter="20">
          <el-col :span="15">
            <el-descriptions class="margin-top" title="用户个人信息" :column="1" :size="size">
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{ user.name }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{ user.phonenumber }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i :class="user.sex = 1 ? 'el-icon-male' : 'el-icon-female'"></i>
                  性别
                </template>
                {{ user.sex = 1 ? '男' : '女' }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-postcard"></i>
                  学号
                </template>
                {{ user.id }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-s-management"></i>
                  学院专业
                </template>
                {{ user.institute }}
                {{ user.specialty }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-timer"></i>
                  生日
                </template>
                {{ user.birth }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-star-off"></i>
                  爱好
                </template>
                {{ user.hobby }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="userItem" content-class-name="userItem">
                <template slot="label">
                  <i class="el-icon-message"></i>
                  邮箱
                </template>
                {{ user.email }}
              </el-descriptions-item>
              <template slot="extra">
                <el-button type="primary" size="small" @click="dialogFormVisible = true">修改个人信息</el-button>
  
                <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
                  <el-form :model="user">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="user.name" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                      <el-input v-model="user.phonenumber" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <!-- <el-radio-group>
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group> -->
                    <el-form-item label="学号" :label-width="formLabelWidth">
                      <el-input v-model="user.id" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="学院" :label-width="formLabelWidth">
                      <el-input v-model="user.institute" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="专业" :label-width="formLabelWidth">
                      <el-input v-model="user.specialty" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="生日" :label-width="formLabelWidth">
                      <el-input v-model="user.birth" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" :label-width="formLabelWidth">
                      <el-input v-model="user.hobby" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                      <el-input v-model="user.email" autocomplete="off" clearable></el-input>
                    </el-form-item>
  
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUserInfo">确 定</el-button>
                  </div>
                </el-dialog>
  
              </template>
  
            </el-descriptions>
  
  
          </el-col>
          <el-col :span="8">
            
            <!--裁剪上传按钮-->
            <div class="userItem">
              <div class="cropper-app">
                <el-upload action="#" class="btn" drag :auto-upload="true" :show-file-list="false" :on-change="handleCrop"
                  :before-upload="beforeAvatarUpload">
                  <el-button type="success" plain round class="img-btn" v-if="!loadingtext" size="mini">更新头像</el-button>
                  <el-button type="success" v-if="loadingtext" disabled round class="img-load" size="mini"
                    :loading="loadingtext">上传中...</el-button>
                </el-upload>
  
                <!-- 剪裁组件弹窗 -->
                <cropper-image :dialogVisible="showCropper" :cropper-option="cropperOption" :file-size="fileSize"
                  :cropper-style="cropperStyle" @close="showCropper = false" @uploadCropper="uploadImg" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
  
    </div>
  </template>
  
  <script>
  
  import cropperImage from "/src/views/inside/mine/Copper.vue"
  import {
    getUserProfile,
    updateUserProfile,
    updateUserImg,
    updatePassword,
    updatePhone,
    updateEmail
  } from "@/api/user"
  
  
  export default {
    components: {
      cropperImage
    },
    name: 'index-mine',
    data() {
      return {
        size: '',
        user: {
          birth: '',
          email: '',
          hobby: '',
          id: '',
          institute: '',
          name: '',
          password: '',
          phonenumber: '',
          sex: '',
          specialty: '',
        },
        cropperData: {},
        dialogFormVisible: false,
        dialogTableVisible: false,
        formLabelWidth: '120px',
        showCropper: false, // 显示裁剪弹窗
        cropperOption: {
          img: '',
          autoCropWidth: 200,
          autoCropHeight: 200
        },
        fileSize: 2, // 限制文件上传大小 2mb
        cropperStyle: {
          width: '600px',
          height: '300px'
        },
        loadingtext: false,
      }
    },
    props: {
  
    },
    created() {
      this.loadUser()
    },
    components: {
    },
    mounted() {
    },
    methods: {
    // 展示个人信息
      loadUser() {
        const myToken = window.localStorage.getItem('token');
        getUserProfile(myToken).then(res => {
          this.user = res.data.data
        })
      },
      // 更新用户信息
      updateUserInfo() {
        const userInfo = {
          name: this.user.name,
          phonenumber: this.user.phonenumber,
          institute: this.user.institute,
          specialty: this.user.specialty,
          birth: this.user.birth,
          sex: this.user.sex,
          hobby: this.user.hobby,
          email: this.user.email,
        }
        updateUserProfile(userInfo).then((res) => {
          this.loadUser();
          console.log(res);
        }).catch((err) => {
          console.log(err);
        });
  
        this.dialogFormVisible = false
  
      },
      // 点击弹出剪裁框
      handleCrop(file) {
        this.$nextTick(() => {
          if (this.canCropper) {
            this.cropperOption.img = window.URL.createObjectURL(file.raw)
            this.showCropper = this.canCropper
          }
        })
      },
      // 上传前校验
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
  
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2 MB!')
        }
        // 校验通过后显示裁剪框
        this.canCropper = isJPG && isLt2M
        return false
      },
      // 更新头像的方法
      uploadImg(f, data) {
        this.progressFlag = true
        const formdata = new FormData()
        formdata.append('userpic', f)
        this.loadingtext = true;
        this.cropperData.iconUrl = data
        this.showCropper = false
        updateUserImg(formdata)
          .then(() => {
            this.loadingtext = false;
            this.$notify({
              title: '成功',
              message: '更换头像成功',
              type: 'success',
              position: 'top-left'
            })
            // location.reload()   刷新页面重新显示新头像
          }).then(() => {
            this.loadingtext = false;
          })
      },
  
    },
    created () {
  
      }
  }
  </script>
  
  <style scoped lang="less">
  .margin-top {
    width: 500px;
    margin: 0 auto;
  
    .userItem {
      margin: 10px;
      font-size: 24px;
  
      i {
        margin-right: 5px;
      }
  
      .tag {
        margin-left: 7px;
      }
    }
  
  }
  
  .cropper-app {
    /deep/ .el-dialog {
      width: max-content;
      max-width: 860px;
      height: 520px;
    }
  
    /deep/ .el-image__inner {
      overflow: hidden;
      border-radius: 6px;
    }
  }
  
  .cropper-app /deep/ .el-upload-dragger {
    border: 0;
    height: auto;
    width: auto;
  }
  
  .upload-box {
    height: 100%;
    background: #ecedf2;
  }
  
  .el-upload-tips {
    margin-top: 10px;
    font-size: 14px;
    color: #a7aebb;
  }
  </style>
  